<template>
    <div class="editor-tools" flex items-center h-60px border-b border-b-solid p-10px m-10px rounded-4 bg-white
        dark="bg-dark border border-solid">
        <n-button block class="editor-tools_btn" @click="handleClickAddBtn">
            <template #icon>
                <n-icon>
                    <PlaylistAddFilled />
                </n-icon>
            </template>
            新增数据
        </n-button>
        <n-button block class="editor-tools_btn" @click="handleClickExportBtn">
            <template #icon>
                <n-icon>
                    <ArrowUpwardFilled />
                </n-icon>
            </template>
            导出加油单
        </n-button>
        <FormDrawer ref="addFormRef" :active="addFormDrawerActive" :form-items="addFormItems"
            @update:active="(val) => { addFormDrawerActive = val }">
            <n-button block type="primary" class="editor-tools_btn" @click="handleClickAddToBtn">
                <template #icon>
                    <n-icon>
                        <AddCircleOutlineFilled />
                    </n-icon>
                </template>
                添加到数据库
            </n-button>
        </FormDrawer>
        <FormDrawer ref="exportFormRef" :active="exportFormDrawerActive" :form-items="exportFormItems"
            @update:active="(val) => { exportFormDrawerActive = val }">
            <n-button block type="primary" class="editor-tools_btn" @click="handleClickDownloadBtn">
                <template #icon>
                    <n-icon>
                        <CloudDownloadOutlined />
                    </n-icon>
                </template>
                下载加油单
            </n-button>
        </FormDrawer>
    </div>
</template>
  
<script setup lang="ts">
import { PlaylistAddFilled, ArrowUpwardFilled, AddCircleOutlineFilled, CloudDownloadOutlined } from "@vicons/material"
import FormDrawer from "@/components/common/FormDrawer.vue"
import { carInfo, carFullInfo } from "@/constant"

const emit = defineEmits<{
    (event: 'add-data', carInfo: Car.CarInfo): void
    (event: 'export-data', carInfo: Car.CarInfo): void
}>()

const addFormItems: FormData.FormItem[] = carInfo.map((item: DataTable.ColumnType) => ({
    key: item.key,
    label: item.title || item.key,
    placeholder: `请输入${item.title}`
}))
const exportFormItems: FormData.FormItem[] = carFullInfo.slice(3).map((item: DataTable.ColumnType) => ({
    key: item.key,
    label: item.title || item.key,
    placeholder: `请输入${item.title}`
}))

const addFormRef = ref<HTMLElement & { formValue: FormData.FormValue } | null>(null)
const exportFormRef = ref<HTMLElement & { formValue: FormData.FormValue } | null>(null)
const addFormDrawerActive = ref<boolean>(false)
const exportFormDrawerActive = ref<boolean>(false)

// 点击新增按钮
function handleClickAddBtn() {
    addFormDrawerActive.value = true
}

// 点击添加到数据库按钮
function handleClickAddToBtn() {
    if (addFormRef.value?.formValue) {
        emit('add-data', addFormRef.value?.formValue as any)
    }
}

// 点击导出按钮
function handleClickExportBtn() {
    exportFormDrawerActive.value = true
}

// 点击下载按钮
function handleClickDownloadBtn() {
    if (exportFormRef.value?.formValue) {
        emit('export-data', exportFormRef.value?.formValue as any)
    }
}
</script>

<style scoped lang="scss">
.editor-tools_btn {
    margin-right: 10px;
    width: inherit;

    &:last-child {
        margin-right: 0;
    }
}
</style>